<template>
  <div class="userinfo">
    <div class="touxiang">
      <img src="../../../assets/images/touxiang.jpg" alt="" />
    </div>
    <ul class="box">
      <li>
        昵称: <span>{{ userForm.username }}</span>
      </li>
      <li>
        电话号码: <span>{{ userForm.phone }}</span>
      </li>
      <li>
        密码: <span>{{ userForm.password }}</span>
      </li>
      <li>
        所在院校: <span>{{ userForm.school }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      userForm: {}
    }
  },
  created() {
    this.getUser()
  },
  methods: {
    async getUser() {
      this.username = window.sessionStorage.getItem('user')
      const { data: res } = await this.$http.get(
        'user/getUserByName/' + this.username
      )
      if (res.status !== 200) return this.$message.error('获取用户信息失败')
      this.userForm = res.data
      // console.log(this.userForm)
    }
  }
}
</script>

<style lang="scss" scoped>
.userinfo {
  display: flex;
  .touxiang {
    img {
      width: 160px;
      height: 160px;
      border-radius: 80px;
    }
  }
  .box {
    margin-left: 10px;
    li {
      font-size: 14px;
      height: 24px;
      line-height: 24px;
      color: #777;
    }
  }
}
</style>
